import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'

/** 广告方块属性 */
export interface AdCubeProperty {
  // 布局类型
  layout: 'leftRight' | 'topBottom'
  // 左侧广告
  leftAds: {
    top: AdItem
    bottom: AdItem
  }
  // 右侧广告
  rightAds: {
    banners: AdItem[]
    bottomItems: AdItem[]
  }
  // 轮播配置
  bannerConfig: {
    autoplay: boolean
    interval: number
    duration: number
  }
  // 组件样式
  style: ComponentStyle & {
    height?: string
    gap?: string
  }
}

/** 广告项 */
export interface AdItem {
  // 图片链接
  imgUrl?: string
  // 标题
  title?: string
  // 副标题
  subtitle?: string
  // 操作按钮文字
  action?: string
  // 装饰图片
  decorationImg?: string
  // 徽章文字
  badge?: string
  // 跳转链接
  url?: string
}

// 定义组件
export const component = {
  id: 'AdCube',
  name: '广告方块',
  icon: 'ep:grid',
  property: {
    layout: 'leftRight',
    leftAds: {
      top: {
        imgUrl: 'https://picsum.photos/300/200?random=1&text=相车新模式',
        title: '相车新模式',
        subtitle: '租满就送车',
        action: '立即查看',
        url: '/pages/activity/index'
      },
      bottom: {
        imgUrl: 'https://picsum.photos/300/200?random=2&text=租车指南',
        title: '租车指南',
        subtitle: '新手三年驾龄',
        decorationImg: 'https://picsum.photos/80/80?random=3&text=👨‍💼',
        url: '/pages/public/richtext'
      }
    },
    rightAds: {
      banners: [
        {
          imgUrl: 'https://picsum.photos/400/200?random=4&text=八大洲解放合资直营道',
          title: '八大洲解放合资直营道',
          subtitle: '民营华东行业领导',
          action: '立即查看',
          url: '/pages/activity/index'
        }
      ],
      bottomItems: [
        {
          imgUrl: 'https://picsum.photos/200/100?random=5&text=零押租车',
          title: '零押租车',
          subtitle: '信用免押金',
          badge: '0',
          url: '/pages/goods/list'
        },
        {
          title: '会员中心',
          subtitle: '开通享受高权益',
          url: '/pages/user/info'
        }
      ]
    },
    bannerConfig: {
      autoplay: true,
      interval: 3000,
      duration: 500
    },
    style: {
      bgType: 'color',
      bgColor: '#f5f6fa',
      marginTop: 5,
      marginBottom: 20,
      marginLeft: 20,
      marginRight: 20,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 8,
      height: '400rpx',
      gap: '12rpx'
    } as ComponentStyle & { height?: string; gap?: string }
  }
} as DiyComponent<AdCubeProperty>
